[자바스크립트] window.onload 여러 번 사용하는 대체 방법

자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 onload를 많이 사용합니다.

그런데 만약 웹페이지에서 window.onload가 여러 번 사용하는 경우? 이 경우 예상과 달리 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있습니다. 그럼 어떻게 해야하는지 대체할 방법을 알아봅니다.

! 우선 onload 이벤트는 언제 필요할까요?

만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요합니다.

# window.onload 대체하는 방법

그렇다면 바로 그 방법을 알아봅니다. 이 경우 생각할 수 있는 방법은 window.onload를 사용하는 대신에 바로 window.addEventListener()를 사용하여 window 객체에 이벤트를 직접 추가하는 방법입니다.

window.addEventListener('onload', 콜백함수)


이 방법은 window.onload와 달리 addEventListener를 사용한 모든 콜백함수가 호출될 수 있습니다. 즉 여러 개의 onload를 사용하여도 한 번만 호출되는 문제를 해결할 수 있는 방법이죠. 그럼 간단한 예제를 보겠습니다.

먼저 기존의 코드입니다. onload에 alert()을 사용하여 1, 2를 두 번 호출되도록 두 번 사용하였습니다.

결과는 1, 2가 모두 호출되지 않습니다. 즉 onload를 여러 번 호출할 경우 배열처럼 추가되는 것이 아니라 갱신되기 때문입니다.

이제 이를 해결하기 위해서 addEventListener()를 사용해보겠습니다. 아래는 두 개의 방법 모두를 사용한 예제입니다.

위 코드는 이 전 예제와는 달리 onload 그리고 addEventListener를 사용한 모든 콜백함수가 호출되어 '1', '2'의 알럿창이 모두 나타나게 됩니다.

이처럼 하나 이상의 onload를 사용되어 문제가 발생하는 경우라면 위의 방법으로 해결이 가능합니다.